<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="display:block;border:1px solid #ccc;margin:20px auto"></canvas>
</body>
<script>
    var ball={x:512,y:100,r:20,g:2,vx:-4,vy:0,color:"#005588"};//x,y表示坐标   半径r  加速度g 速度vx 速度vy也就是y方向的速度

    var canvas=document.getElementById("canvas");
    canvas.width=1024;
    canvas.height=768;
    var context=canvas.getContext("2d");
    
    function update(){
        ball.x+=ball.vx;
        ball.y+=ball.vy;
        ball.vy+=ball.g;
        if(ball.y>=768-ball.r){
            ball.y=768-ball.r;
            ball.vy=-ball.vy*0.5;
        }
    }
    function render(cxt){
        cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
        cxt.fillStyle=ball.color;
        cxt.beginPath();
        cxt.arc(ball.x,ball.y,ball.r,0,Math.PI*2);
        cxt.closePath();
        cxt.fill();
    }

    function step(){
        render(context);
        update();
        window.requestAnimationFrame(step);
    }
    
    window.requestAnimationFrame(step);
</script>
</html>